<template>
    <h3>请选择你的英雄</h3>
    <div :class="Content">
        <div :class="Head">
            <div :class="Title">无双剑姬</div>
            <span :class="Button" @click="Click">显示</span>
        </div>
        <div v-if="visible">
            <div :class="Element" @click="Textclick1">无双剑姬</div>
            <div :class="Element" @click="Textclick2">疾风剑豪</div>
            <div :class="Element" @click="Textclick3">伊泽瑞尔</div>
            <div :class="Element" @click="Textclick4">深海泰坦</div>
            <div :class="Element" @click="Textclick5">寒冰射手</div>
        </div>
    </div>
</template>

<script setup>
let visible=ref(0);
import { ref } from 'vue'
let Head = ref('Head')
let Content=ref('Content')
let Element=ref('Element')
let Title=ref('Title')
let Button=ref('Button')
// let Text=document.querySelector('.Button')
let Click=function Click()
{
    if(visible.value==0)
    {
        let Text=document.querySelector('.Button')
        Text.innerText="隐藏"
        visible.value=1
    }
    else
    {
        let Text=document.querySelector('.Button')
        Text.innerText="显示"
        visible.value=0
    }
}
let Textclick1=function Textclick1() {
    let Text=document.querySelector('.Title')
    Text.innerText="无双剑姬"
}
let Textclick2=function Textclick1() {
    let Text=document.querySelector('.Title')
    Text.innerText="疾风剑豪"
}
let Textclick3=function Textclick1() {
    let Text=document.querySelector('.Title')
    Text.innerText="伊泽瑞尔"
}
let Textclick4=function Textclick1() {
    let Text=document.querySelector('.Title')
    Text.innerText="深海泰坦"
}
let Textclick5=function Textclick1() {
    let Text=document.querySelector('.Title')
    Text.innerText="寒冰射手"
}
</script>

<style lang="scss">
#app {
    .Button{
        cursor: pointer;
        margin-right: 10px;
    }
    .Title{
        margin-left: 10px;
    }
    .Element{
        cursor: pointer;
        padding-left: 10px;
        // background-color: red;
    }
    .Element:hover
    {
        background-color: #579572;
    }
    .Element:active{
        background-color: #869d9d;
    }
    .Content{
        width: 300px;
        border: solid grey 2px;
        margin: 30px auto;
        border-radius: 10px;
    }
    .Head {
        display: flex;
        justify-content: space-between;
        border-bottom: solid grey 2px;
    }
    h3 {
        text-align: center;
    }
    border-radius: 10px;
    margin: 50px auto;
    width: 400px;
    height: 250px;
    border:solid grey 2px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}
</style>